/**index.wxss**/

page {
    background: #f7f7f7;
    height: auto;
}

/* 轮播图及搜索框 */

swiper {
    width: 100%;
    height: 350 rpx;
    overflow: hidden;
}

swiper.pic-swiper {
    margin-top: 75 rpx;
    padding: 10 rpx 0;
    background: #fff;
    height: 422 rpx;
}

swiper-item {
    font-size: 26 rpx;
    font-weight: bold;
}

swiper.pic-swiper .img-box {
    font-size: 0;
}

.wx-swiper-dots {
    margin-bottom: 15 rpx;
}

.banner-item {
    box-sizing: border-box;
}

swiper.pic-swiper .banner {
    position: absolute;
    width: 690 rpx;
    margin: 0 10 rpx;
    height: 402 rpx;
    border-radius: 8 rpx;
    display: inline-block;
    box-shadow: 0 4px 10px 0 rgba(83, 83, 83, 0.288);
}

.container .bg-sear {
    position: fixed;
    z-index: 999;
    width: 100%;
    line-height: 56 rpx;
    background: #fff;
    padding: 20 rpx 0;
    text-align: center;
    top: 0;
}

.bg-sear .section {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 60 rpx;
    background: #fff;
    z-index: 1;
    border-radius: 50 rpx;
    width: 92%;
    margin: auto;
    left: 4%;
    background: #f7f7f7;
}

.bg-sear .section .placeholder {
    display: block;
    font-size: 24 rpx;
    color: #999;
}

.bg-sear .section .search-img {
    width: 32 rpx;
    height: 32 rpx;
    margin-right: 10 rpx;
}

/* 分类栏目 */

.content {
    background: #fff;
}

.cat-item {
    display: flex;
    justify-content: space-between;
    background: #fff;
    padding-top: 20 rpx;
    padding-bottom: 30 rpx;
}

.cat-item .item {
    text-align: center;
    width: 25%;
    display: flex;
    flex-direction: column;
    margin: auto;
    align-items: center;
}

.cat-item .item image {
    width: 75 rpx;
    height: 75 rpx;
}

.cat-item .item text {
    font-size: 26 rpx;
    margin-top: 20 rpx;
}

/* 消息播放 */

.message-play {
    position: relative;
    height: 90 rpx;
    background: #fff;
    margin: auto;
    padding: 0 60 rpx 0 100 rpx;
    box-sizing: border-box;
    box-shadow: 0 16 rpx 32 rpx 0 rgba(7, 17, 27, 0.05);
    border: 2 rpx solid #fafafa;
}

.message-play .hornpng {
    width: 77 rpx;
    height: 36 rpx;
    position: absolute;
    left: 20 rpx;
    top: 27 rpx;
    margin-right: 8 rpx;
}

.message-play .swiper-cont {
    height: 90 rpx;
    line-height: 90 rpx;
}

.message-play .swiper-cont .items {
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    text-align: left;
}

.arrow {
    width: 15 rpx;
    height: 15 rpx;
    border-top: 3 rpx solid #686868;
    border-right: 3 rpx solid #686868;
    transform: rotate(45deg);
    position: absolute;
    right: 30 rpx;
    top: 34 rpx;
}

/* 每日上新 */

.title {
    position: relative;
    height: 64 rpx;
    line-height: 64 rpx;
    font-size: 32 rpx;
    padding: 40 rpx 0 10 rpx 30 rpx;
    color: #333;
    background: #fff;
}

.up-to-date .title {
    color: #fff;
    background: none;
}

.title .more-prod-cont {
    color: #999;
    display: inline-block;
    text-align: right;
}

.up-to-date .title .more-prod-cont .more {
    position: absolute;
    right: 30 rpx;
    top: 48 rpx;
    color: #fff;
    font-size: 24 rpx;
    background: #65addf;
    border-radius: 30 rpx;
    padding: 0 30 rpx;
    height: 44 rpx;
    line-height: 44 rpx;

}

.title .more-prod-cont .more {
    position: absolute;
    right: 30 rpx;
    top: 48 rpx;
    color: #666;
    font-size: 24 rpx;
    padding: 0 20 rpx;
    height: 44 rpx;
    line-height: 44 rpx;
}

.title .more-prod-cont .arrow {
    top: 58 rpx;
    right: 30 rpx;
    border-top: 2 rpx solid #666;
    border-right: 2 rpx solid #666;
}

.up-to-date {
    background-image: url("");
    background-position: top;
    background-size: 100% 332 rpx;
    background-repeat: no-repeat;
    background-color: #fff;
}

.up-to-date .item-cont {
    margin: auto;
    height: auto;
    width: calc(100% - 40rpx);
    /* padding:0 20rpx; */
    display: flex;
    flex-wrap: wrap;
    /* justify-content: space-around; */
    /* padding: 10rpx 0 0 0; */
}

.hotsale-item-cont {
    padding-bottom: 20 rpx;
    background: #fff;
}

.up-to-date .item-cont::before {
    clear: both;
    height: 0;
    overflow: hidden;
}

.up-to-date .item-cont .prod-item {
    border-radius: 10 rpx;
    width: 220 rpx;
    background: #fff;
    display: inline-block;
    margin: 0 8 rpx;
    margin-bottom: 20 rpx;
    box-shadow: 0 rpx 6 rpx 8 rpx rgba(58, 134, 185, 0.2);
}

.up-to-date .item-cont .prod-item .imagecont {
    width: 100%;
    font-size: 0;
}

.up-to-date .item-cont .prod-item .imagecont .prodimg {
    width: 220 rpx;
    height: 220 rpx;
    vertical-align: middle;
    border-top-left-radius: 10 rpx;
    border-top-right-radius: 10 rpx;
    font-size: 0;

}

.up-to-date .item-cont .prod-item .prod-text {
    font-size: 28 rpx;
    overflow: hidden;
    margin: 10 rpx 0;
    height: 75 rpx;
    display: -webkit-box;
    word-break: break-all;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    color: #000;
    padding: 0 10 rpx;
}

.up-to-date .item-cont .prod-item .prod-price {
    font-size: 25 rpx;
    color: #eb2444;
    font-family: Arial;
    padding: 0 10 rpx;
}

.more.prod-price {
    position: absolute;
    bottom: 20 rpx;
}

/* 商城热卖 */

.hot-sale {
    /* margin: 15rpx 0; */
}

.hot-sale .prod-items {
    width: 345 rpx;
    display: inline-block;
    background: #fff;
    padding-bottom: 20 rpx;
    box-sizing: border-box;
    /* border: 2rpx solid #e1e1e1; */
    box-shadow: 0 rpx 6 rpx 8 rpx rgba(58, 134, 185, 0.2);
}

.hot-sale .prod-items:nth-child(2n-1) {
    margin: 20 rpx 10 rpx 10 rpx 20 rpx;
}

.hot-sale .prod-items:nth-child(2n) {
    margin: 20 rpx 20 rpx 10 rpx 10 rpx;
}

.prod-items .hot-imagecont .hotsaleimg {
    width: 341 rpx;
    height: 341 rpx;
}

.prod-items .hot-text .hotprod-text {
    font-size: 28 rpx;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.prod-items .hot-imagecont {
    font-size: 0;
    text-align: center;
}

.prod-items .hot-text {
    margin-top: 20 rpx;
    padding: 0 10 rpx;
}

.prod-items .hot-text .prod-info, .more-prod .prod-text-right .prod-info {
    font-size: 22 rpx;
    color: #999;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.prod-items .hot-text .prod-text-info {
    position: relative;
    height: 70 rpx;
    line-height: 70 rpx;
    font-family: Arial;
}

.prod-items .hot-text .prod-text-info .hotprod-price {
    display: inline;
    font-size: 26 rpx;
    color: #eb2444;
}

.prod-items .hot-text .prod-text-info .basket-img {
    width: 50 rpx;
    height: 50 rpx;
    position: absolute;
    right: 0;
    bottom: 7 rpx;
    /* border: 2rpx solid #eb2444;
    border-radius: 50%; */
    padding: 8 rpx;
}

.singal-price {
    display: inline;
    font-size: 20 rpx;
    text-decoration: line-through;
    color: #777;
    margin-left: 15 rpx;
}

/* 更多宝贝 */

.more-prod {
    background: #fff;
}


.more-prod .prod-show .show-item .more-prod-pic {
    width: 250 rpx;
    height: 250 rpx;
}

.more-prod .prod-show .show-item {
    position: relative;
    display: flex;
    padding: 20 rpx;
    justify-content: start;
    border-top: 2 rpx solid #f4f4f4;
}

.more-prod .prod-show .show-item .more-prod-pic .more-pic {
    max-width: 100%;
    max-height: 100%;
}

.more-prod .prod-show .show-item .prod-text-right {
    margin-left: 30 rpx;
    width: 72%;
    padding-bottom: 10 rpx;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.more-prod .prod-show .show-item .prod-text-right .go-to-buy {
    font-size: 26 rpx;
    background: #fff2f5;
    color: #eb2444;
    border-radius: 50 rpx;
    text-align: center;
    padding: 12 rpx 20 rpx;
    position: absolute;
    right: 20 rpx;
    bottom: 20 rpx;
}

.more-prod .prod-show .show-item .prod-text-right .prod-text.more {
    margin: 0;
    font-size: 28 rpx;
    overflow: hidden;
    margin-bottom: 20 rpx;
    display: -webkit-box;
    word-break: break-all;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.more-prod .prod-show .show-item .prod-text-right .more.prod-price {
    font-size: 28 rpx;
    font-family: arial;
}

.b-cart {
    margin-top: 30 rpx;
}

.b-cart .basket-img {
    width: 50 rpx;
    height: 50 rpx;
    position: absolute;
    right: 46 rpx;
    /* border: 2rpx solid #eb2444;
    border-radius: 50%; */
    padding: 8 rpx;
}
